<?php

use kartik\file\FileInput;
use yii\helpers\Url;
use yii\bootstrap\ActiveForm;

\app\assets\AdminUpload::register($this);

$this->beginPage();
?>
<!DOCTYPE html>
<html lang="<?php echo Yii::$app->language; ?>">
<head>
    <?php
    $this->registerMetaTag(["name" => "viewport", "content" => "width=device-width, initial-scale=1.0"]);
    $this->registerMetaTag(["http-equiv" => "Content-type", "content" => "text/html;charset=utf-8"]);
    $this->head();
    ?>
</head>
<style>
    .main {
        #position: absolute;
        height: 100%;
        width: 100%;
    }

    .div-upload-desc {
        #position: absolute;
        width: 80px;
        height: 35px;
        text-align: right;
    }

    .div-upload-desc div {
        #position: relative;
        bottom: -10px;
    }

    .div-upload {
        #position: absolute;
        left: 80px;
    }

</style>
<body>
<div class="main">
    <!--<div class="div-upload-desc">
        <div>上传封面：</div>
    </div>-->
    <div class="div-upload">
        <div id="message" style="color: red"></div>
        <?php
        $picid = Yii::$app->request->get('picid') ?: '';
        $inputid = Yii::$app->request->get('inputid') ?: '';
        $form = ActiveForm::begin([
            'options' => ['enctype' => 'multipart/form-data'],
        ]);
        if ($inputid == 'subjectmodel-append') {
            $multiple = true;
            $showPreview = true;
        }else{
            $multiple = false;
            $showPreview = false;
        }
        // echo '<label class="control-label">上传图片</label>';
        echo FileInput::widget([
            'name' => 'cover',
            'options' => ['multiple' => $multiple],
            'pluginOptions' => [
                'uploadUrl' => Url::to(['/admin/upload/qiniu']),     // 异步上传的接口地址设置
                'uploadAsync' => true,
                'showPreview' => $showPreview,//去除预览功能
                'showCaption' => true,
                'showRemove' => false,
                'showUpload' => true,
                'elErrorContainer'=>'#message',
                'initialPreviewAsData'=>true,
                'maxFileSize'=>2048,
                'allowedFileExtensions'=> ["jpg", "jpeg","png", "gif","bmp"],
                // 如果要设置具体图片上的移除、上传和展示按钮，需要设置该选项
                'fileActionSettings' => [
                    'width'=>'3px',
                    // 设置具体图片的查看属性为false,默认为true
                    'showZoom' => false,
                    // 设置具体图片的上传属性为true,默认为true
                    'showUpload' => false,
                    // 设置具体图片的移除属性为true,默认为true
                    'showRemove' => true,
                ]
            ],
            'pluginEvents' => [
                "fileuploaded" => "function (event, data, id, index) {
                   if(check(data) == false){return false;}
                   var imgUrl='http://'+data.response.imgUrl;
                   var inputid = '$inputid';
                   if(inputid == 'subjectmodel-coverurl'){
                       $('.imgiframe',window.parent.document).parent().parent().find('#$picid').attr('src',imgUrl);//获取父页面的方法  
                       $('.imgiframe',window.parent.document).parent().parent().find('#$inputid').attr('value',imgUrl);  
                   }else if(inputid == 'subjectmodel-append'){
                        //console.log(data);
                       appendTo(inputid,data);
                   }else{
                       $('.imgiframe',window.parent.document).parent().find('#$picid').attr('src',imgUrl);//获取父页面的方法  
                       $('.imgiframe',window.parent.document).parent().find('#$inputid').attr('value',imgUrl);   
                   }
                   $('#message').html('');
                 }",
            ],
        ]);
        //'previewSettings'=>["width"=> "5px", "height"=>"5px"]
        ?>
    </div>
</div>
    <?php
    if ($inputid == 'subjectmodel-append') {
        ?>
        <div style="height: 20px"></div>
        <div style="display: none">
            图片高：<input id="media-width" class="span8 inline-input" placeholder="" type="text"/>
            图片宽：<input id="media-height" class="span8 inline-input" placeholder="" type="text"/>
        </div>
    <?php } ?>
    <?php ActiveForm::end(); ?>
    <?php $this->endBody(); ?>
</body>
</html>
<script>
    function check(data) {
        if(data.response.errCode== 1001){
            $("#message").html(data.response.errDesc);
            return false;
        }
        if(data.response.errCode== 1002){
            $("#message").html(data.response.errDesc);
            return false;
        }
    }
    function appendTo(inputid, data) {
        var index = 0;
        var imgUrl = 'http://' + data.response.imgUrl;

        var imgEl = '<img src="' + imgUrl + '">';

        //触发关闭
        //$("#little-baby", window.parent.document).trigger("click");

        //附加图片的信息（增加tr td）
        //写入到参数列表中去（POST的参数）
        var mediaList = $("#media-list", window.parent.document);

        mediaList.append('' +
            '<tr class="first">' +
            ' <td style="display: none">' +
            '  <input name="media-img-url[]" type="hidden" class="media-img-url"/>' +
            '  <input name="media-width[]" type="hidden" class="media-width"/>' +
            '  <input name="media-height[]" type="hidden" class="media-height"/>' +
            ' </td>' +
            ' <td class="img-url"><!--图片地址--></td>' +
            //' <td class="img-width"><!--图片宽--></td>' +
            //' <td class="img-height"><!--图片高--></td>' +
            ' <td class="media-opt-rm">移除</td>' +
            ' <td><div id="copyimg" class="copy">插入图片</div></td>' +
            '</tr>');
        index = mediaList.find("tr").length;

        if (index > 0) {
            var tr = $(mediaList.find("tr")[index - 1]);

            tr.find(".img-url").html(imgEl);
            //tr.find(".img-width").html($("#media-width").val());
            //tr.find(".img-height").html($("#media-height").val());
            $("#media-width").val(data.response.imgWidth);
            $("#media-width").val(data.response.imgHeight);
            tr.find(".img-width").html(data.response.imgWidth);
            tr.find(".img-height").html(data.response.imgHeight);

            tr.find(".media-img-url").val(imgUrl);
            tr.find(".media-width").val($("#media-width").val());
            tr.find(".media-height").val($("#media-height").val());
        }
        $("#little-baby-update", window.parent.document).trigger("click");

    }
</script>
<?php $this->endPage(); ?>



